<template>
    <Card>
        <div slot="title">
            <Button type="primary" @click="add">添加</Button>
            <div style="float: right;">
                <Input v-model="search" @on-change="searchEditChange" style="width: 250px;"
                       placeholder="请按 用户名、手机号、部门、用户角色 搜索"></Input>
                <Button type="primary" icon="ios-search">搜索</Button>
            </div>
        </div>
        <Table border height="500" stripe :columns="columns" :data="datas"></Table>
        <!--<Page :total="datas.length" show-elevator></Page>-->

        <Modal
                v-model="isShowModal"
                width='400'
                :mask-closable="false"
                title="用户管理">
            <Form :label-width="80" :model="fromValidate" ref="userInfo">
                <FormItem label="用户名">
                    <Input v-model="fromValidate.username" class="inputWidth" placeholder="请输入用户名"></Input>
                </FormItem>
                <FormItem label="密码">
                    <Input v-model="fromValidate.password" class="inputWidth" type="password"
                           placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem label="确认密码">
                    <Input v-model="fromValidate.passwordCheck" class="inputWidth" type="password"
                           placeholder="请确认密码"></Input>
                </FormItem>
                <FormItem label="部门">
                    <Input v-model="fromValidate.department" class="inputWidth" placeholder="请输入部门"></Input>
                </FormItem>
                <FormItem label="联系方式">
                    <Input v-model="fromValidate.phonenum" class="inputWidth" placeholder="请输入联系方式"></Input>
                </FormItem>
                <FormItem label="用户角色">
                    <Select v-model="fromValidate.userrole" class="inputWidth" placeholder="请选择用户角色">
                        <Option v-for="item in userRole" :value="item" :key="item">{{item}}</Option>
                    </Select>
                </FormItem>
            </Form>

            <div slot="footer" style="margin: 0 auto">
                <Button type="primary" @click="ok">添加</Button>
                <Button type="ghost" @click="clearFromData" style="margin-left: 8px">重置</Button>
            </div>

        </Modal>

    </Card>
</template>

<script>
    import {register} from './../../api'
    export default {
        data() {
            return {
                search: '',
                columns: [
                    {
                        title: '用户名',
                        key: 'username',
                        align: 'center',
                    },
//                    {
//                        title: '密码',
//                        key: 'password',
//                        align: 'center',
//                        type: 'password',
//                    },
                    {
                        title: '部门',
                        key: 'department',
                        align: 'center'

                    },
                    {
                        title: '联系信息',
                        key: 'phonenum',
                        align: 'center'
                    },
                    {
                        title: '用户角色',
                        key: 'role',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'handle',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params);
                                        }
                                    },
                                }, "编辑"),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: "您确认删除这条内容吗？",
                                        trnsfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.delete(params)
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small',
                                        },
                                    }, "删除")
                                ])
                            ])
                        }
                    }


                ],//用户列表头
                datas: [
                    {
                        username: '王小明1',
                        password: 182222,
                        department: '北京市朝阳区芍药居',
                        phonenum: '18922223333',
                        role: '普通用户'
                    },
//                    {
//                        username: '王小明2',
//                        password: 182222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '超级用户'
//                    },
//                    {
//                        username: '王小明3',
//                        password: 18222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//                    },
//                    {
//                        username: '王小明4',
//                        password: 18222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//                    },
//                    {
//                        username: '王小明5',
//                        password: 182222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//
//                    },
//                    {
//                        username: '王小明6',
//                        password: 182222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '超级用户'
//                    },
//                    {
//                        username: '王小明7',
//                        password: 18222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//                    },
//                    {
//                        username: '王小明8',
//                        password: 18222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//                    },
//                    {
//                        username: '王小明9',
//                        password: 182222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//
//                    },
//                    {
//                        username: '王小明10',
//                        password: 182222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '超级用户'
//                    },
//                    {
//                        username: '王小明11',
//                        password: 18222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//                    },
//                    {
//                        username: '王小明12',
//                        password: 18222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//                    },
//                    {
//                        username: '王小明13',
//                        password: 182222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//
//                    },
//                    {
//                        username: '王小明14',
//                        password: 182222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '超级用户'
//                    },
//                    {
//                        username: '王小明15',
//                        password: 18222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//                    },
//                    {
//                        username: '王小明16',
//                        password: 18222,
//                        department: '北京市朝阳区芍药居',
//                        phonenum: '18922223333',
//                        role: '普通用户'
//                    }
                ],//默认的用户列表
                isShowModal: false,
                fromValidate: {
                    username: '',
                    password: '',
                    passwordCheck: '',
                    department: '',
                    phonenum: '',
                    userrole: '',
                },
                userRole: ['超级用户', '普通用户'],//用户权限列表
                choseRowIndex: -1,//当前选中的行
                eidtModalType: 'add',//默认为添加


            }
        },
        methods: {
            searchEditChange: function (event) {

            },

            clearFromData: function () {
                this.fromValidate.username = '';
                this.fromValidate.password = '';
                this.fromValidate.passwordCheck = '';
                this.fromValidate.department = '';
                this.fromValidate.phonenum = '';
                this.fromValidate.userrole = '';
            },
            add: function () {
                this.clearFromData();
                this.editModalType = 'add';
                this.isShowModal = true;
            },
            edit: function (params) {
                this.editModalType = 'edit';
                this.choseRowIndex = params.index;
                //赋值
                var rowData = params.row;
                this.fromValidate.username = rowData.username;
                this.fromValidate.password = rowData.password;
                this.fromValidate.passwordCheck = rowData.password;
                this.fromValidate.department = rowData.department;
                this.fromValidate.phonenum = rowData.phonenum;
                this.fromValidate.userrole = rowData.role;
                this.isShowModal = true;
            },
            delete: function (params) {
                this.data.splice(params.index, 1);
            },
            //检查输入是否完全
            checkValues: function () {
                var _this = this;
                var showMessage = function (msg) {
                    _this.$Modal.warning({
                        title: '提示',
                        content: msg
                    });
                }
                if (this.fromValidate.username.trim() == '') {
                    showMessage('请输入用户名!');
                } else if (this.fromValidate.password.trim() == '') {
                    showMessage('请输入用户密码!');
                } else if (this.fromValidate.passwordCheck.trim() == '') {
                    showMessage('请输入核对密码!');
                } else if (this.fromValidate.passwordCheck != this.fromValidate.password) {
                    showMessage('请检查两次密码输入是否一致!');
                } else if (this.fromValidate.department.trim() == '') {
                    showMessage('请输入部门名称!');
                } else if (this.fromValidate.phonenum.trim() == '') {
                    showMessage('请输入手机号码!');
                } else if (this.fromValidate.userrole.trim() == '') {
                    showMessage('请选择用户权限!')
                } else {
                    return true;
                }
                return false;
            },
            ok: function () {
                if (!this.checkValues())
                    return;
                let data = {
                    username: this.fromValidate.username,
                    password: this.fromValidate.password,
                    department: this.fromValidate.department,
                    phonenum: this.fromValidate.phonenum,
                    role: this.fromValidate.userrole,
                }
                if (this.editModalType == 'add') {
                    this.datas.push(data);
                } else {
                    this.$set(this.data, this.choseRowIndex, data);
                }
                this.isShowModal = false;
            },
        },


    }
</script>

<style scoped>
    .inputWidth {
        width: 220px;
    }
</style>